<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function find(){
                var myli=document.querySelector("#myli");

                //获取已经元素的父元素的节点
                var parent=myli.parentNode;
                console.log(parent);
                //获取已经元素的前一个的节点
                var prev=myli.previousSibling;
                console.log(prev);
                //获取已经元素的后一个的节点
                var next=myli.nextSibling;
                console.log(next);

                var ul=document.querySelector("ul");

                // 查找当前节点中的第一个子节点/查找当前节点中的最后一个子节点
                var first=ul.firstChild;
                var last=ul.lastChild;
                console.log(first);
                console.log(last);





            }
        </script>
    </head>
    <body>
        <input type="button" value="根据已知节点查找其他节点" onclick="find()">
        <ul>
            <li>li01</li>
            <li id="myli">li02</li>
            <li>li03</li>
            <li>li04</li>
            <li>li05</li>
        </ul>
    </body>
</html>